import React from 'react';
import { connect } from 'dva'
import { Page, Loader } from 'components'
import OrderFilterUnExpand from 'components/Filter/OrderFilterUnExpand';
import { Divider, Modal, Button, Icon } from 'antd'
import PageHeaderLayout from 'components/Layout/PageHeaderLayout'
import moment from 'moment'
import { contractOrderType, productType } from 'utils/enumConfig'
import ContractDetailModal from './ContractDetailModal';
import LwjTable from 'components/LwjTable/LwjTable'
import styles from './index.less';

const statusObj = {
  "PUBLISHED_TO_OMS": "已确认",
  "PENDING_CONFIRM_OMS_QUOTED": "待确认"
}
const ConfirmOmsQuoteContract = ({ location, dispatch, confirmOmsQuoteContract, loading }) => {
  const {
    items,
    isExpand,
    pagination,
    currentContractDetail,
    isShowContractDetailModal,
    isShowContractConfirmModal,
    currentItem,
    tenantOverall
  } = confirmOmsQuoteContract

  const breadcrumbList = [
    {
      title: '订单管理'
    },
    {
      title: '待确认丽维家报价'
    }
  ];

  // 定义筛选属性 表单相关
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'contractNum',
        title: '合同号'
      }, {
        type: 'select',
        id: 'contractOrderType',
        title: '合同类型',
        options: [
          {
            value: '',
            name: '全部'
          },
          {
            value: 'CUSTOMIZE',
            name: '定制'
          }, {
            value: 'END',
            name: '成品'
          }
        ],
        defaultValue: ""
      }, {
        type: 'select',
        id: 'productType',
        title: '产品类型',
        options: [
          {
            value: '',
            name: '全部'
          },
          {
            value: 'CUPBOARD',
            name: '橱柜'
          }, {
            value: 'WARDROBE',
            name: '衣柜'
          }, {
            value: 'END',
            name: '成品'
          }
        ],
        defaultValue: ""
      }, {
        type: 'select',
        id: 'status',
        title: '报价状态',
        options: [
          {
            value: '',
            name: '全部'
          },
          {
            value: 'PUBLISHED_TO_OMS',
            name: '已确认'
          }, {
            value: 'PENDING_CONFIRM_OMS_QUOTED',
            name: '待确认'
          }
        ],
        defaultValue: ""
      }, {
        type: 'dateRule',
        id: 'createTime',
        dateFormat: 'YYYY/MM/DD HH:mm:ss',
        title: '创建时间'
      }
    ],
    onFilterChange(value) {
      dispatch({
        type: 'confirmOmsQuoteContract/query',
        payload: {
          ...value
        }
      })
    },
    isExpand,
    noExpand() {
      dispatch({ type: 'confirmOmsQuoteContract/unExpandFilter', payload: {} })
    },
    expand() {
      dispatch({ type: 'confirmOmsQuoteContract/expandFilter', payload: {} })
    }
  }

  // 列表相关
  const listProps = {
    dataSource: items,
    loading: loading.effects['confirmOmsQuoteContract/query'],
    pagination,
    pageChangeAction: 'confirmOmsQuoteContract/query',
    dispatch,
    location
  };

  const contractOrderColumns = [
    {
      title: '合同号',
      dataIndex: 'contractNum',
      key: 'contractNum'
    }, {
      title: '合同类型',
      dataIndex: 'contractOrderType',
      key: 'contractOrderType',
      render: (text, record, index) => (contractOrderType[record.contractOrderType])
    }, {
      title: '产品类型',
      dataIndex: 'productType',
      key: 'productType',
      render: (text, record, index) => (productType[record.productType])
    }, {
      title: '是否需要设计',
      dataIndex: 'designNeeded',
      key: 'designNeeded',
      render: (text, record, index) => (record.designNeeded ? "是" : "否")
    }, {
      title: '丽维家报价金额',
      dataIndex: 'omsConfirmQuoteAmount',
      key: 'omsConfirmQuoteAmount',
      render: (text, record, index) => (record.omsConfirmQuoteAmount === null ? "" : record.omsConfirmQuoteAmount.toFixed(2))
    }, {
      title: '报价状态',
      dataIndex: 'status',
      key: 'status',
      render: (text, record, index) => (statusObj[text])
    }, {
      title: '修改时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      render: (text, record, index) => (moment(record.updateTime).format("YYYY-MM-DD HH:mm:ss"))
    }, {
      title: '操作',
      dataIndex: 'handleType',
      key: 'handleType',
      render: (text, record, index) => (
        <span>
          {record.status==="PENDING_CONFIRM_OMS_QUOTED" && <a onClick={() => toggleConfirmOmsQuoteModal(record, true)}>确认报价</a>
          }<Divider type="vertical" />
          <a onClick={() => onShowDetail(record)}>查看</a>
        </span>
      )
    }
  ];

  // 合同详情 props
  const contractDetailModalProps = {
    title: "合同详情",
    visible: isShowContractDetailModal,
    destroyOnClose: true,
    width: 1000,
    currentContractDetail,
    footer: null,
    onCancel(record) {
      dispatch({
        type: 'confirmOmsQuoteContract/hideContractDetailModal',
        payload: {}
      });
    }
  };

  /**
   * 确认OMS报价
   * @param {*} record
   */
  const toggleConfirmOmsQuoteModal = (record, isShowContractConfirmModal) => {
    dispatch({
      type: 'confirmOmsQuoteContract/toggleConfirmOmsQuoteModal',
      currentItem: record,
      isShowContractConfirmModal: isShowContractConfirmModal
    });
  }

  /**
   * 通过OMS报价
   * @param {*} record
   */
  const acceptOmsQuote = () => {
    dispatch({
      type: 'confirmOmsQuoteContract/acceptOmsQuote',
      payload: {
        contractOrderId: currentItem.id,
        salesOrderId: currentItem.salesOrderId,
        version: currentItem.version
      }
    });
  }

  /**
   * 不通过OMS报价
   * @param {*} record
   */
  const denyOmsQuote = () => {
    dispatch({
      type: 'confirmOmsQuoteContract/denyOmsQuote',
      payload: {
        contractOrderId: currentItem.id,
        salesOrderId: currentItem.salesOrderId,
        version: currentItem.version
      }
    });
  }

  /**
   * 查看详情
   * @param {*} record
   */
  const onShowDetail = (record) => {
    dispatch({
      type: 'confirmOmsQuoteContract/onShowDetail',
      payload: {
        contractOrderId: record.id,
        salesOrderId: record.salesOrderId
      }
    });
  }

  return (
    <PageHeaderLayout title="确认丽维家报价" breadcrumbList={breadcrumbList}>
      <Page inner>
        <ContractDetailModal {...contractDetailModalProps} />
        <OrderFilterUnExpand {...filterProps} />
        <LwjTable {...listProps} columns={contractOrderColumns} />
        <Modal
          visible={isShowContractConfirmModal}
          title="确认报价"
          destroyOnClose={true}
          onCancel={() => {toggleConfirmOmsQuoteModal({}, false)}}
          footer={[
            <Button key="deny" onClick={denyOmsQuote}>不通过</Button>,
            <Button key="accept" type="primary" onClick={acceptOmsQuote}>通过</Button>
          ]}
        >
          <div className={styles.confirmBox}>
            <Icon type="question-circle" style={{color: "#faad14", fontSize: "22px"}}/>
            <div className={styles.boxMain}> 
              <div className={styles.title}>您是否确认要通过丽维家的报价方案？</div>
              <span>
                <label>丽维家报价金额：</label> {currentItem.omsConfirmQuoteAmount ? currentItem.omsConfirmQuoteAmount.toFixed(2) : ''}
              </span><br />
              <span>
                <label>账户余额：</label> {tenantOverall !== null && tenantOverall !== '' ? tenantOverall.toFixed(2) : ""}
              </span><br />
            </div>
          </div>
          <Loader spinning={loading.effects['confirmOmsQuoteContract/acceptOmsQuote','confirmOmsQuoteContract/denyOmsQuote']} />
        </Modal>
      </Page>
    </PageHeaderLayout>
  )
};

export default connect(({ confirmOmsQuoteContract, loading }) => ({ confirmOmsQuoteContract, loading }))(ConfirmOmsQuoteContract)
